<template>
  <div id="ShoppingCart">
    <van-row class="height bgc">
      <van-col span="24">
        <van-nav-bar title="商品详情" left-arrow @click-left="onClickLeft"> </van-nav-bar>
      </van-col>
      <van-col span="24" class="centenr-box1">
        <van-col span="8">30天无忧退货</van-col>
        <van-col span="8">48小时快速退款</van-col>
        <van-col span="8">满88元免邮费</van-col>
      </van-col>
      <!-- 没有商品就显示 -->
      <van-col span="24" v-if="GetShoppingCartList.length == 0" class="nogoods">
        <van-empty description="描述文字">
          <van-button round type="danger" class="bottom-button" @click="onGoSearch">去添加</van-button>
        </van-empty>
      </van-col>

      <van-col span="24" class="centenr-box2 ">
        <van-row style=" border-bottom: 1px solid rgba(0, 0, 0, 0.1);" v-for="(item, index) in GetShoppingCartList" :key="index">
          <van-col span="3" class="checkbox">
            <input type="checkbox" v-model="item.checked" @change="onGetIsChecked(item)" />
          </van-col>
          <van-col span="6">
            <van-col span="24">
              <img :src="item.picUrl" alt="" />
            </van-col>
          </van-col>
          <van-col span="15" class="centenr-box2-p">
            <p class="van-ellipsis">
              {{ item.goodsName }}<span v-if="!SetOk" class="van-ellipsis-span">×{{ item.number }}</span>
            </p>
            <p>
              <span>{{ item.specifications.join('——') }}</span>
            </p>
            <p>￥{{ item.price }}</p>
            <div class="theme" v-if="SetOk">
              <van-stepper v-model="item.number" @change="onChangeStepper(item)" theme="round" button-size="22" min="1" max="10" disable-input />
            </div>
          </van-col>
        </van-row>
      </van-col>

      <!-- <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-col span="24" v-for="(item, index) in ShoppingCartList" :key="index" class="goods">
          <van-swipe-cell>
            <van-card :num="item.number" :price="item.price" :desc="item.specifications[0]" :title="item.goodsName" class="goods-card" :thumb="item.picUrl" />
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" />
            </template>
            <template #left>
              <van-checkbox name="a"></van-checkbox>
            </template>
          </van-swipe-cell>
        </van-col>
      </van-checkbox-group> -->
    </van-row>
    <van-row span="24" class="buttom" gutter="20">
      <!-- <van-submit-bar :price="getPrice.totalPrice" button-text="提交订单" @submit="onSubmit">
        <input type="checkbox" :checked="checkAll" @click="onAllCheck" /> <span>全选</span>
      </van-submit-bar> -->

      <van-col span="6" class="checkbox">
        <input type="checkbox" :checked="checkAll" @click="onAllCheck" />
        <span>全选</span>
      </van-col>
      <van-col span="6">
        <span>￥{{ getPrice.totalPrice }}</span>
      </van-col>
      <van-col span="12">
        <van-row type="flex" justify="end" class="btn-row">
          <van-col span="12" class="set" @click="onSetModify">{{ SetOk ? '完成' : '编辑' }}</van-col>
          <van-col span="12" class="del" @click="onDelShoppingCart">{{ SetOk ? '删除' : '下单' }}</van-col>
        </van-row>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  name,
  data() {
    return {
      GoodsNumber: '',
      GetShoppingCartList: {},
      total: 0,
      SetOk: false,
      placeDel: false,
      ShowStepper: false //显示添加件数
      // 设置删除 或者 下单 状态
    }
  },

  mounted() {
    this.onGetShoppingCartList()
  },
  methods: {
    // 返回上一级
    onClickLeft() {
      this.$router.back()
    },
    // 编辑按钮   完成
    onSetModify() {
      if (!this.SetOk) {
        this.SetOk = true
        this.GetShoppingCartList.forEach(element => {
          element.checked = false
        })
      } else {
        this.SetOk = false
        this.onGetShoppingCartList()
      }
    },
    // 监听添加件数的按钮
    onChangeStepper(item) {
      this.GoodsNumber = item.number
      this.GetShoppingCartList.forEach(elementm => {
        // 封装异步请求，在里面执行多项异步请求，
        let data = {
          id: elementm.id, //购物车Id
          productId: elementm.productId, //当前商品指定规格的商品ID,（不修改时传原值或0）
          goodsId: elementm.goodsId, //当前商品ID
          number: elementm.number // 商品数量,（不修改时传原值）
        }
        this.$post('cart/update', data).then(result => {
          resolve()
        })
      })
      // 当每次修改就发请求修改本地
    },
    onGoSearch() {
      this.$router.push('/search')
    },
    onAllCheck() {
      // 收集未选中的
      var cartIds = this.GetShoppingCartList.filter(element => {
        // 过滤 数组中是false的值,然后赋值 为true
        return !this.checkAll ? !element.checked : true
      }).map(element => {
        // 收集未选中的id
        return element.id
      })
      let checkbox = {
        cartIds: cartIds,
        isChecked: !this.checkAll //反
      }
      this.$post('cart/checked', checkbox).then(result => {
        this.GetShoppingCartList = result.data.data.cartList
      })
    },
    // 复选框的状态 获取当前 的内容 然后进行 当前状态的判断，
    onGetIsChecked(item) {
      if (!item.checked) {
        let checkbox = {
          cartIds: [item.id],
          isChecked: 0
        }
        this.$post('cart/checked', checkbox).then(result => {})
      } else {
        let checkbox = {
          cartIds: [item.id],
          isChecked: 1
        }
        this.$post('cart/checked', checkbox).then(result => {})
      }
    },
    // onChangeChecked() {
    //   var arr = []
    //   this.ShoppingCartList.forEach(res => {
    //     if (res.checked == true) {
    //       arr.push(res.id)
    //     }
    //   })
    //   let data = {
    //     cartIds: arr,
    //     isChecked: 1
    //   }
    //   // 购物车选择或取消选择商品
    //   this.$post('cart/checked', data).then(result => {
    //     this.ShoppingCartList = result.data.data.cartList
    //   })
    // },
    //获取购物车的数据
    onGetShoppingCartList() {
      this.$get('cart/index').then(result => {
        this.GetShoppingCartList = result.data.data.cartList
      })
    },
    // 全选按钮
    // toggleAll() {
    //   if (this.checkAll == true) {
    //     this.GetShoppingCartList.forEach(element => {
    //       this.total += element.price
    //       element.isChecked = true
    //     })
    //   } else {
    //     this.total = 0
    //     this.GetShoppingCartList.forEach(element => {
    //       element.isChecked = false
    //     })
    //   }
    // },
    onSubmit() {},
    // 全部删除
    onDelShoppingCart() {
      // 使用筛选
      if (this.SetOk) {
        var cartIds = []
        this.GetShoppingCartList.forEach(element => {
          if (element.checked) {
            cartIds.push(element.id)
          }
        })
        this.$post('cart/delete', { cartIds: cartIds }).then(result => {
          this.onGetShoppingCartList()
        })
      } else {
        let data = {
          data: 0
        }
        this.$router.push({ path: '/order', query: data })
      }
    }
  },
  computed: {
    // 监听全选框的状态
    checkAll() {
      // every  循环判断每一项，只有全部都为true，才会返回true
      // some  回调函数的返回只要有一个true就返回true
      return this.GetShoppingCartList.every(element => {
        return element.checked
      })
    },
    getPrice() {
      // reduce  迭代,每次都会把前面的值累计到下一个值
      return this.GetShoppingCartList.reduce(
        (pre, element, index) => {
          // 计算价格总数,  条件: 是否选中,选中就当前的价格×商品数量   否则就是+0
          pre.totalPrice += element.checked ? element.price * element.number : 0
          // 计算选中的总数  条件:是否选中 选中的＋1
          pre.checkedCount += element.checked ? 1 : 0
          return pre
        },
        {
          totalPrice: 0,
          checkedCount: 0
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.centenr-box1 {
  text-align: center;
  line-height: 0.45rem;
  font-size: 0.13rem;
  opacity: 0.6;
}
.bottom-button {
  width: 1.6rem;
  height: 0.4rem;
}
.nogoods {
  background-color: #fff;
  width: 100%;
  height: calc(100vh - 100px);
}

.centenr-box2 {
  margin-bottom: 1rem;
  .van-row:last-child {
    margin-bottom: 1rem;
  }
  .van-row {
    background-color: #fff;
    height: 1rem;
    position: relative;
    .checkbox {
      line-height: 0.9rem;
      height: 1rem;
      input {
        width: 60px;
        text-align: center;
        margin: 0 auto;
      }
    }

    .centenr-box2-p {
      padding: 0.5rem;
      p {
        margin: 0;
        .van-ellipsis-span {
          position: absolute;
          right: 10px;
          top: 0.1rem;
        }
      }
      p:nth-child(1) {
        font-size: 0.14rem;
      }
      p:nth-child(2) {
        font-size: 0.12rem;
        opacity: 0.7;
        margin: 5px 0px 10px 0px;
      }
      p:nth-child(3) {
        font-size: 0.16rem;
        color: chocolate;
      }
      .theme {
        position: absolute;
        right: 0.15rem;
        top: 0.6rem;
      }
    }
    .van-col {
      padding: 0.1rem;
      .van-col {
        background-color: rgb(247, 245, 245);
        img {
          width: 100%;
        }
      }
    }
  }
}
.goods {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  .van-card__title {
    font-size: 0.15rem;
    margin: 0.05rem 0rem;
  }
}

.delete-button {
  height: 100%;
}
.van-submit-bar {
  margin-bottom: 0.5rem !important;
}
.buttom {
  width: 100%;
  line-height: 0.5rem;
  background-color: #fff;
  position: absolute;
  bottom: 0.45rem;
  position: fixed;
  .checkbox {
    text-align: center;
  }
  .btn-row {
    text-align: center !important;
    .del {
      background-color: red;
      color: #fff;
    }
    .set {
      background-color: #ff976a;
      color: #fff;
    }
  }
}
</style>
